<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Insert title here</title>
    <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <script src="https://unpkg.com/element-ui/lib/index.js"></script>
    <script src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.8.0.js"></script>
    <script src="https://unpkg.com/axios/dist/axios.min.js"></script>
    <style>
        .el-row {
            margin-bottom: 20px;
        }

        .login-box {
            margin-top: 20%;
            margin-left: 40%;
        }
    </style>
</head>
<body>
<div class="login-box" id="app">
    <el-form :rules="rules" :model="loginForm" ref="loginForm">
        <el-row>
            <el-col :span="8">
                <el-form-item prop="username">
                    <el-input v-model="loginForm.username" placeholder="请输入帐号">
                        <template slot="prepend">帐号</template>
                    </el-input>
                </el-form-item>
            </el-col>
        </el-row>
        <el-row>
            <el-col :span="8">
                <el-form-item prop="password">
                    <el-input v-model="loginForm.password" type="password" placeholder="请输入密码">
                        <template slot="prepend">密码</template>
                    </el-input>
                </el-form-item>
            </el-col>
        </el-row>
        <el-row>
            <el-col :span="8">
                <el-button @click="submitForm('loginForm')" style="width:100%" type="primary">登录</el-button>
            </el-col>
        </el-row>
    </el-form>
</div>
</body>

<script type="text/javascript">
    new Vue({
        el: '#app',
        data: {
            loginForm: {
                username: '',
                password: ''
            },
            rules: {
                username: [
                    {required: true, message: '请输入账号', trigger: 'blur'},
                    {min: 3, max: 10, message: '长度在 3 到 10 个字符', trigger: 'blur'}
                ],
                password: [
                    {required: true, message: '请输入密码', trigger: 'blur'}
                ]
            }
        },
        methods: {
            submitForm(formName) {
                this.$refs[formName].validate((valid) => {
                    if (valid) {
                        let param = new URLSearchParams();
                        param.append("username", this.loginForm.username);
                        param.append("password", this.loginForm.password);
                        axios({
                            url: '[[@{/}]]login',
                            method: "POST",
                            data: param
                        }).then(function (res) {
                            console.info(res);
                        }).catch(function () {
                            alert("系统错误！")
                        });
                    } else {
                        return false;
                    }
                });
            }
        }
    })
</script>
</html>